<!-- Sets up templates for the actual "slides" and forms that are 
supposed to be shown at each stage of the experiment. -->

<html>
<head>
  <title>Start page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://stanford.edu/~louyang/mmturkey.0.5.js?nowarn"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script LANGUAGE="JavaScript">
<!--
// // prevent spacebar from scrolling down the page (the default) as it's used as the response button.
// $(document).keydown(function (e) {
//     var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
//     if (key == 32)
//        e.preventDefault();
//  });

function ValidateForm(form){
    var valid = 0;
    for(var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].checked == true ) { 
            valid = 1; 
            return true;
        } 
    } 
    if (valid == 0) {
        alert ( "Please answer this question." );
        return false; 
    }
}

function ValidateSelect(form) {
    if (form.ageRange.selectedIndex != 0 && form.ageRange.selectedIndex != 1 && form.ageRange.selectedIndex != 2 && form.ageRange.selectedIndex != 3 && form.ageRange.selectedIndex != 4 && form.ageRange.selectedIndex != 5 && form.ageRange.selectedIndex != 6) {
        alert ( "Please answer this question." );
        return false;
    }
    return true; 
}

function ValidateNumber(field)
{
    valid = true;
    if (field.value == "")
    {
        alert ("Please answer all the questions.");
        valid = false;
    }
    if (field.value < 0 || field.value > 10) {
    	alert ("Please answer between 0 and 10.");
    	valid = false;
    }
    if (isNaN(field.value)) {
        alert ("Please answer using only numbers.");
        valid = false;
    }
    return valid;

}

function checkPreview() {
    if (turk.previewMode) {
        alert ("Please accept this HIT to see more questions.");
        return false;
    }
    return true;
}

function ValidateText(field)
{
    valid = true;

    if (field.value == "" )
    {
        alert ("Please answer all the questions.");
        valid = false;
    }

    return valid;
}

/*
function pressEnter(e) {
    if (e.keyCode == 13) {
    	document.rating.next.click();
    	return false;
    }
}
*/


function ValidateRadioButtons() {
    
    if ($('input[name="q1"]:checked').val()!=null &&
        $('input[name="q2"]:checked').val()!=null
        ) {
        return true;
    } else {
        alert ( "Please answer all the questions." );
        return false;    
    }
}

function ValidateDemographicForm() {
        if ($('input[name="genderButton"]:checked').val()!=null) {
        return true;
    } else {
        alert ( "Please answer all the questions." );
        return false;    
    }
}

</script>
<div class="progress" id="progressBar">
    <div class="bar-wrapper">
      <div class="bar"></div>
    </div>
    <p>Progress bar: <span id="trial-num">{{}}</span><span>/</span><span id="total-num">{{}}</span></p>
</div>
<div class="slide" id="instructions">
  <img src="images/stanford.png" alt="Stanford University">
    <p id='logo-text'>Stanford Department of Psychology</p>
  <p class="block-text">
  In this experiment, we are interested in how people detect objects. 
  </p>
  <br>
  <p class="block-text">
  This HIT involves watching some videos in the browser, and some browsers may not support the code that we use. We have tested this on Chrome, Safari and Firefox, and so we are restricting this HIT to only these three browsers.
  </p>
  
  <button type="button" id="startButton" onclick="this.blur(); experiment.description()">Start</button>
 
    <p class="block-text" id="legal">Legal information: By answering the
    following questions, you are participating in a study being performed by
    cognitive scientists in the Stanford Department of Psychology. If you have
    questions about this research, please contact us at <a
    href="mailto:languagecoglab@gmail.com">languagecoglab@gmail.com</a>.
    You must be  at least 18 years old to
    participate. Your participation in this research is voluntary. You may
    decline to answer any or all of the following questions. You may decline
    further participation, at any time, without adverse consequences. Your
    anonymity is assured; the researchers who have requested your
    participation will not receive any personal information about you.
    <br>
    <br>
    We have recently been made aware that your public Amazon.com profile can be accessed via your worker ID if you do not choose to opt out. If you would like to opt out of this feature, you may follow instructions available here:
    <br><br>
    <a href="http://www.amazon.com/gp/help/customer/display.html?nodeId=16465241">http://www.amazon.com/gp/help/customer/display.html?nodeId=16465241</a>
    </p>

</div>

<div class="slide" id="description">
<p id='logo-text'>Instructions</p>
<p class="block-text"> This is a visual detection task. We will be showing you several videos of a ball moving around. Each movie is less than 30s long. The progress bar at the top shows you how many trials you have completed. If you wish to take a break, please do <b>not</b> do so while a trial is on-going, but you may do so before moving onto the subsequent trial. </p>

<br>
<p class="block-text"> There are 3 things to do per trial, and there are 3 keys that you have to press: "<b>b</b>", "<b>q</b>", and "<b>p</b>". Please respond <b>as quickly as you can</b> in steps 2 and 3 below. <br>
    1) Press "<b>b</b>" to start the movie. <br>
    2) Press "<b>q</b>" with your left hand once the lightbulb on the left lights up. There is a time limit within which you have to respond. <br>
    3) Once the "fence" falls, press "<b>p</b>" with your right hand once you have detected the ball. If the ball is not present, do not press anything. </p>


<div id="form">
<button type="button" onclick="this.blur(); experiment.next()">Let's Start!</button>
</div>
</div>


<div class="slide" id="stage">
<p class="block-text">     
    1) Press "<b>b</b>" to start the movie. <br>
    2) Press "<b>q</b>" with your left hand once the lightbulb on the left lights up. There is a time limit within which you have to respond. <br>
    3) Once the "fence" falls, press "<b>p</b>" with your right hand once you have detected the ball. If the ball is not present, do not press anything.</p>
        
<center>
    <video width="640" height="480" preload id="videoElement">
<!--<video width="640" height="480" preload id="videoElement" src="videos/T1_P+A+.ogv">-->
  <!--
  <source id="mp4src" src="videos/P+A+.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source id="oggsrc" src="videos/P+A+.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source id="webmsrc" src="videos/P+A+.webm" type='video/webm; codecs="vp8, vorbis"'>
  -->
Your browser does not support the video tag.
</video>
<br>
<span id="agentDetected"> </span>
<br>
<span id="ballDetected"> </span>
<br>
<button type="button" id="nextButton" onclick="this.blur(); experiment.next()">Next</button>
</center>


    <!--    
        <center>
    <div id="leftFrame" width="50%" height="300" style="display: inline"> 
        <img src="images/puppy1.jpeg" id="leftPic">
    </div>
    
    <div id="rightFrame" width="50%" height="300" style="display: inline"> 
        <img src="images/kitten1.jpeg" id="rightPic">
    </div>
        </center>
    -->
    <br><br>

    <!--<canvas id="spinnerCanvas" width="200" height="200"> </canvas>-->

    <!--
    <div id="response">
        <div id="form">
        -->

        <!--
        <form name="rating">
        <span id="scale"><b>0</b> = Extremely Sad </span>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="score" size="10" runat=server onkeypress="return pressEnter(event)"/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span id="scale"><b>10</b> = Extremely Happy </span>
        -->
<!--
        <form name="q1form">
        Which picture do you prefer?
        <br>
            <span id="pictureChoiceResponse">
                Left
                    <input type="radio" name="q1" value="1" />  
                    <input type="radio" name="q1" value="2" />  
                Right
            </span>
        </form>
        
        <br>

        <form name="q2form">
        How cute was the one you picked?
        <br>
            <span id="cutenessResponse">
                Not at all
                    <input type="radio" name="q2" value="1" />  
                    <input type="radio" name="q2" value="2" />  
                    <input type="radio" name="q2" value="3" />  
                    <input type="radio" name="q2" value="4" />  
                    <input type="radio" name="q2" value="5" />  
                    <input type="radio" name="q2" value="6" />  
                    <input type="radio" name="q2" value="7" />  
                    <input type="radio" name="q2" value="8" />  
                    <input type="radio" name="q2" value="9" />  
                Cutest thing I've ever seen!
            </span>
        </form>
-->               

        <!--
        <button type="button" id="next" onclick="this.blur(); if (ValidateNumber(document.rating.score)) {experiment.next();}">Next</button>
        
        </form>
        -->
    
    <!--
        <br>
        <button type="button" id="next" onclick="this.blur(); if (ValidateRadioButtons()) {experiment.next();}">Next</button>
    
        
        </div>
    </div>
    -->
</div>

<div class="slide" id="askInfo">
    
    <div id="form">
    <!--
    <p id="infoQ">Please answer a few questions about yourself. </p>
    <form name="gender">
    </br>
    <span id="infoQ">Gender:</span>&nbsp;&nbsp;
    <input type="radio" name="genderButton" value="M" /><span id="opt">Male</span>&nbsp;&nbsp;
    <input type="radio" name="genderButton" value="F" /><span id="opt">Female</span>
    </form>
    
    <form name="age">
    <span id="infoQ">Age range:</span>&nbsp;&nbsp;
    <select name=ageRange>
    <option value=17><span id="opt">Under 18</span></option>
    <option value=25><span id="opt">18-25</span></option>
    <option value=35><span id="opt">26-35</span></option>
    <option value=45><span id="opt">36-45</span></option>
    <option value=55><span id="opt">46-55</span></option>
    <option value=65><span id="opt">56-65</span></option>
    <option value=66><span id="opt">Above 66</span></option>
    </select>
    </form>
    
    <form name="language">
    <span id="infoQ">What is your native language?</span>&nbsp;&nbsp;
    <input type="text" name="nativeLanguage" /><br />
    </form>
    
    -->
    <form name="comments">
    </br>
    </br>
    
    <span id="infoQ"> Please leave any comments or suggestions regarding this HIT:</span></br>
    <TEXTAREA name="input" ROWS=10 COLS=50></TEXTAREA>
    </br>
    </form>
    <button type="button" onclick="this.blur(); experiment.end();">Submit</button>
    <!--
    <button type="button" onclick="this.blur(); if (ValidateDemographicForm() && ValidateSelect(document.age) && ValidateText(document.language.nativeLanguage)) {experiment.end();}">Submit</button>
    -->

    </div>
</div>

<div class="slide" id="finished">
  You're finished - thanks for participating! Submitting to Mechanical Turk...
</div>

<script src="experiment.js"></script>
</body>
</html>